<div class="box">
    <div class="box-header">
        <h3 class="box-title"><i class="glyphicon glyphicon-map-marker"></i> <?=$institute->ins_name?></h3>
    </div>
    <div class="box-body ">

        <? //Common::pr($instituteAddressList); exit ?>

        <table id="addressTable" class="display table table-bordered">
            <thead>
            <tr>
                <th class="text-right w1">#</th>
                <th><?=$this->lang->line("NAME")?></th>
                <th><?=$this->lang->line("CITY")?></th>
                <th><?=$this->lang->line("POSTAL_CODE")?></th>
                <th><?=$this->lang->line("ADDRESS")?></th>
                <th class="w1 ws"><?=$this->lang->line("OPTIONS")?></th>
            </tr>
            </thead>
            <tbody>
            <?php
            foreach($instituteAddressList as $add) {
                echo		"<tr>";
                echo			"<td class=\"vm w1 text-right\"></td>";
                echo			"<td class=\"vm\">".$add->add_name."</td>";
                echo			"<td class=\"vm\">".$add->city->city_name."</td>";
                echo			"<td class=\"vm\">".$add->add_postal_code."</td>";
                echo			"<td class=\"vm\">".$add->add_address."</td>";
                echo			"<td class=\"vm w1 ws text-center\">";
                echo				"<button class=\"btn btn-xs btn-primary\" data-add=\"".$add->add_id."\" title=\"".$this->lang->line("EDIT")."\" ><span class=\"glyphicon glyphicon-edit\"></span></button>";
                echo				"&nbsp;<button class=\"btn btn-xs btn-danger\" data-add-delete=\"".$add->add_id."\" title=\"".$this->lang->line("DELETE")."\"><span class=\"glyphicon glyphicon-remove-circle\"></span></button>";
                echo			"</td>";
                echo		"</tr>";
            }
            ?>
            </tbody>
        </table>

        <script>
            $(document).ready( function () {

                var addressTable = $('#addressTable').DataTable({
                    "language": {
                        "url": "<?=MEDIA?>admin_lte/DataTables-1.10.3/localization/en.lang"
                    },
                    "autoWidth": false,
                    "columnDefs": [{
                        "searchable": false,
                        "orderable": false,
                        "targets": 0
                    }, {
                        "searchable": false,
                        "orderable": false,
                        "targets": -1
                    }],
                    "order": [[ 1, 'asc' ]],
                    stateSave: true
                });

                addressTable.on('draw.dt', function () {
                    addressTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                        $(cell).addClass('text-right');
                        cell.innerHTML = i+1 + '.';
                    });
                    addressEventRebind();
                    $('#addressTable').removeClass('hidden');
                });

                addressTable.on( 'init.dt', function () {
                    $('#addressTable_length').append('<button class="btn btn-sm btn-success" style="margin-left: 20px;" data-add="-1"><span class="glyphicon glyphicon-plus"></span> <?=$this->lang->line("ADD_NEW")?></button>');
                    addressEventRebind();
                });

            });

            function addressEventRebind() {
                  $('button[data-add]').unbind('click').on('click', function(e) {
                    e.preventDefault();
                    $this = $(this);
                    $.ajax({
                        type: "POST",
                        cache: false,
                        data: { insId: '<?=$institute->ins_id?>', addId: $this.data('add') },
                        url: '<?=site_url("admin_lte/get_institute_address_editor")?>',
                        beforeSend: function() {
                            $('#studyEditorModal .modal-title').html(($this.data('add') == '-1' ? '<?=$this->db->escape_str($this->lang->line("ADD_NEW"))?>' : '<?=$this->lang->line("EDIT")?>') + ' ' + '<?=strtolower($this->lang->line("ADDRESS"))?>');
                            $('#studyEditorModal .modal-body form').html('<?=$this->db->escape_str($this->lang->line("PLEASE_WAIT,_PROCESSING_IN_PROGRESS"))?>');
                            $('#studyEditorModal').modal('toggle');
                        },
                        success: function (result) {
                            $('#studyEditorModal button.btn-success').data('url', '<?=site_url("admin_lte/institute_address_insert_update")?>');
                            $('#studyEditorModal .modal-body form').html(result);
                        },
                        error: function (error) {}
                    });
                });

                $('button[data-add-delete]').unbind('click').on('click', function() {
                    $this = $(this);
                    $('#studyDeleteModal .modal-title').html('<?=$this->lang->line("DELETE")?>');
                    $('#studyDeleteModal .modal-body form').html('<?=$this->db->escape_str($this->lang->line("ARE_YOU_SURE_YOU_WOULD_LIKE_TO_DELETE_THE_ITEM"))?>');
                    $('#studyDeleteModal .modal-body form').append('<input type="hidden" name="del" value="true" /><input type="hidden" name="add_ins_id" value="<?=$institute->ins_id?>" /><input type="hidden" name="addId" value="' + $this.data('addDelete') + '" />');
                    $('#studyDeleteModal button.btn-danger').data('url', '<?=site_url("admin_lte/institute_address_insert_update");?>');
                    $('#studyDeleteModal').modal('toggle');
                });
            }
        </script>

    </div>
</div>